<template>
  <div class="goods-container mb60 mt50">
    <!-- 头部导航 -->
    <van-nav-bar
      fixed
      :title="goodsInfo.goodsname"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" />
      </template>
      <template #right>
        <van-icon name="cart-o" size="24" />
      </template>
    </van-nav-bar>
    <!-- 商品封面图 -->
    <van-swipe :autoplay="1500">
      <van-swipe-item>
        <img :src="$baseUrl + goodsInfo.img" class="goods-cover" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">1/1</div>
      </template>
    </van-swipe>

    <div class="goods-desc">
      <h5 class="price">&yen;{{ goodsInfo.price }}</h5>
      <p>{{ goodsInfo.goodsname }}</p>
      <van-cell-group>
        <van-cell title="促销" value="购买可得积分999" />
        <van-cell title="服务" value="七天无理由退还" label="假一赔十" />
      </van-cell-group>
      <!-- 商品详细介绍 -->
      <div v-html="goodsInfo.description"></div>
    </div>
    <!-- 商品导航 -->
    <van-action-bar style="z-index: 999">
      <van-action-bar-icon
        icon="shop-o"
        text="店铺"
        @click="$router.push('/home')"
      />
      <van-action-bar-icon
        icon="cart-o"
        :badge="cartGoodsCount"
        text="购物车"
        @click="$router.push('/cart')"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="onBuyClicked"
      />
    </van-action-bar>

    <!-- 购物车模态框 -->
    <transition name="van-slide-up">
      <CartModal ref="modal" v-model="visible" />
    </transition>
  </div>
</template>
  
<script setup>
import { inject, onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import useCartStore from "@/store/cartStore";
import CartModal from "@/components/CartModal";
import { useRouter,useRoute } from "vue-router";
import { showToast } from "vant";
const visible = ref(false);
const goodsInfo = ref({});
const router = useRouter();
const route = useRoute();
const baseUrl = inject("baseURL");
const axios=inject('axios');
const cartStore=useCartStore();
const {cartGoodsCount}=storeToRefs(cartStore);
const {cartAddAction}=cartStore;

// 显示购物车数据
const showCart = () => {
  visible.value = true;
};
const onBuyClicked = () => {
  const { id: goodsid } = goodsInfo.value;
  // 添加购物车
  cartAddAction({ goodsid, num: 1 });
  // 显示模态框
  showCart();
};

const onClickRight = () => {
  router.push({ name: "cart" });
};
const onClickLeft = () => {
  router.back();
};

// 查询商品详情
const getGoodsInfo = () => {
  const { id } = route.query;
  axios.get("/getgoodsinfo", { params: { id } }).then((res) => {
    if (res.code) {
      if (!res.list) {
        router.push({ name: "index" });
        showToast("商品不存在");
        return false;
      }
      goodsInfo.value = res.list && res.list[0];
      goodsInfo.value.picture = baseUrl + goodsInfo.value.img;
      // if (res.list[0].sku) {
      //   // 商品sku
      //   sku = goodsInfo.sku;
      //   // 设置默认价格和默认库存
      //   sku.price = goodsInfo.price;
      //   sku.stock_num = goodsInfo.number;
      // }
    }
  });
};
onMounted(() => {
  const { id } = route.query;
  if (!id) {
    showToast("参数错误");
    router.push("/home");
  }
  getGoodsInfo();
});
</script>
  
<style scoped lang="scss">
.goods-cover {
  width: 100%;
  height: 200px;
}

.van-goods-action {
  z-index: 999;
}

.goods-desc {
  padding: 10px 20px;
}

.price {
  color: red;
  font-size: 22px;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
</style>